<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        /*
            1.当鼠标在box盒子按下的时候
            2.并且鼠标window中移动时候 box元素跟着鼠标一起移动
        */
        var box = document.querySelector('.box');
        var left=window.innerWidth-box.offsetWidth;
        var top=window.innerHeight-box.offsetHeight;

        box.onmousedown = function (e) {
            e=e||window.event
           
            var boxX=e.offsetX;//获取鼠标到box的宽
            var boxY=e.offsetY;//获取鼠标到box的高

            // console.log(1);

            // 按下之后 在window中移动
            window.onmousemove = function (e) {
                // box元素跟着光标移动
                // 获取光标在可视窗口的坐标，然后把这个值赋值给box的left和top值
                e = e || window.event;
               
                var x= e.clientX-boxX;//鼠标到可视窗口的宽
                var y= e.clientY-boxY;//鼠标到可视窗口的高
                box.style.left = x+ 'px';
                box.style.top = y+ 'px'


                if(x>=left)x=left+'px';
                if(x<=0)x=0+'px';
                box.style.left=x;

                console.log(y);
                console.log('top'+top);
                
                if(y>=top){
                    y=top+'px'
                    console.log(2);
                    };
                if(y<=0)y=0+'px';
                box.style.top=y;

                // box.style.left = x+ 'px';
                // box.style.top = y+ 'px'
            }
        }
        // 当鼠标在任何位置抬起来的时候，要把移动事件清除
        window.onmouseup = function () {
            //清除一个事件，只需要将事件的值设置null
            window.onmousemove = null;
        };
    </script>
</body>

</html>